<template>
    <div id="home">
        <ul class="bitebi">
            <li @click="active($event);updateTicker('btc')" class="active">
                <div>比特币BTC</div>
                <span>{{dataObj.btc}}</span>
            </li>
            <li @click="active($event);updateTicker('ltc')">
                <div>莱特币LTC</div>
                <span>{{dataObj.ltc}}</span>
            </li>
            <li @click="active($event);updateTicker('eth')">
                <div>以太坊ETH</div>
                <span>{{dataObj.eth}}</span>
            </li>
        </ul>
        <ul class="shuju">
          <li>
              <div>
                买入 <span class="jin">{{dataObj.mr买入}}</span>
              </div>
              <div>
                卖出 <span class="jin">{{dataObj.mc卖出}}</span>
              </div>
            </li>
          <li>
            <div>
              最高 <span class="zui">{{dataObj.Max}}</span>
            </div>
            <div>
              最低 <span class="zui">{{dataObj.Min}}</span>
            </div>
          </li>
          <li>
            <div>
              实时 <span class="shi">{{dataObj.ss事实}}</span>
            </div>
            <div>
              成交量 <span class="shi">{{dataObj.cjl成交量}}</span> 万
            </div>
          </li>
        </ul>
        <ul class="mai">
          <li class="mairu" @click="openModal('mairu')">
            <span><i class="iconfont icon-tubiaoshangshengqushi"></i></span>
            <span>买入<div>{{dataObj.cy持有}}</div></span>
          </li>
          <li class="maichu" @click="openModal('maichu')">
            <span><i class="iconfont icon-tubiaoxiajiangqushi"></i></span>
            <span>卖出<div>{{dataObj.cy持有}}</div></span>
          </li>
        </ul>
        <k-xian class="k-xian"></k-xian>
        <modal v-if="isModal" @close="closeModal" :value="modals">
          <!-- <div slot="title">建仓</div>
          <div slot="body">这里是内容了</div>
          <div slot="fooder">确认</div> -->
        </modal>
    </div>
</template>

<script>
import modal from "../Common/Modal";
import KXian from '../Common/KXian';
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      dataObj: {
        btc: 0,
        ltc: 0,
        eth: 0,
        mr买入: 46703.18,
        Max: 46703.18,
        Min: 46703.18,
        ss事实: 46703.18,
        mc卖出: 46703.18,
        cjl成交量: 100,
        cy持有: 3655.59
      },
      isModal: false,
      modals:{
        ticker:"btc",
        mai:"mairu"
      }
    };
  },
  components: {
    modal,
    KXian
  },
  computed: {
    ...mapGetters(["getBtc", "getLtc", "getEth"])
  },
  mounted() {
    if (this.dataObj.btc == 0) {
      this.updateTicker("btc");
    }
  },
  methods: {
    async getAllTicker() {
      await this.$store.dispatch("getAllTicker");
      this.dataObj.btc = this.getBtc.btc;
      this.dataObj.ltc = this.getBtc.ltc;
      this.dataObj.eth = this.getBtc.eth;
    },
    active(event) {
      // 找到父节点下的所有 li 标签
      let oLi = event.currentTarget.parentNode.getElementsByTagName("li");
      // 遍历并去除所有li标签的 active 样式
      for (let index = 0; index < oLi.length; index++) {
        const element = oLi[index];
        element.classList.remove("active");
      }
      // event.currentTarget 当前函数作用的节点
      event.currentTarget.classList.add("active");
    },
    // 更新数据
    async updateTicker(ticker) {
      await this.getAllTicker();
      this.modals.ticker = ticker;
      // 处理数据
      switch (ticker) {
        case "btc":
          this.getdata2dataObj(this.getBtc);
          break;
        case "ltc":
          this.getdata2dataObj(this.getLtc);
          break;
        case "eth":
          this.getdata2dataObj(this.getEth);
          break;
        default:
        console.log('不明所以');
          break;
      }
    },
    /**@method
     * 数据转换
     */
    getdata2dataObj(data) {
      this.dataObj.Max = data.high;
      this.dataObj.Min = data.low;
      this.dataObj.mr买入 = data.buy;
      this.dataObj.mc卖出 = data.sell;
      this.dataObj.cjl成交量 = data.vol;
      this.dataObj.ss事实 = data.last;
    },
    openModal(mai) {
      this.modals.mai = mai;
      this.isModal = true;
    },
    closeModal() {
      this.isModal = false;
    }
  }
};
</script>

<style scoped>
#home {
  height: 90vh;
  overflow-y: scroll;
}
.bitebi,
.shuju,
.mai {
  display: flex;
  justify-content: space-around;
  list-style: none;
}
.bitebi {
  text-align: center;
  background: #1f2020;
  padding-top: .5rem;
}
.bitebi li {
  color: #aaaaaa;
  height: 100%;
  width: 100%;
  line-height: 1.75rem;
  box-sizing: border-box;
}
.bitebi > li > span {
  color: #44b260;
}
.active {
  border-bottom: 3px solid #ff3333;
}
.shuju {
  flex-wrap: wrap;
  background-color: #080808;
  color: #aaaaaa;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.shuju .jin {
  color: #20ec53;
}
.shuju .zui {
  color: #ff3333;
}
.shuju .shi {
  color: #f707c3;
}
.mai {
  height: 12vh;
  align-items: center;
  background-color: #080808;
}
.mai li {
  height: 8vh;
  width: 25vw;
  color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.mai li span {
  display: inline-block;
}
.mai li span div {
  font-size: 0.8rem;
}
.mai i {
  font-size: 2rem;
}
.mairu {
  background-color: #ff3333;
}
.maichu {
  background-color: #44b260;
}
</style>